<template>
  <div class="apply_box">
    <div class="desc">
      <span class="name">简单三步</span>
      <span>挑选适合你的医院</span>
    </div>
    <div class="apply_form">
      <el-form ref="addForm" :inline="true" :model="addForm" label-width="0" :rules="addFormRules" :show-message="false"
        :inline-message="true">
        <el-form-item label="" prop="city">
          <el-cascader ref="carousel" v-model="addForm.city" class="a_select" popper-class="el_cascader" :options="cityJson" :props="props"
            placeholder="您所在的城市"></el-cascader>
        </el-form-item>
        <el-form-item label="" prop="troubleId">
          <el-select v-model="addForm.troubleId" class="a_select" placeholder="您的口腔问题">
            <el-option v-for="(item, index) in questionList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="phone">
          <el-input v-model="addForm.phone" class="a_input" maxlength="11" placeholder="填写您的手机号" />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" class="btn" :loading="loading" @click="saveApplyInfo">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { Select, Option, Input, Cascader,Form,FormItem } from "element-ui";
import cityJson from "@/assets/json/city.json";
import { PLATFORM_TYPE,GET_ORALCAVITY_TROUBLE_OPTIONS,GET_QUOTATION_QUERY } from "@/http/interface";
import { PHONE_VALIDATOR } from '@/utils/validator'
import {deepClone,showToast} from '@/utils/utils'
export default {
  name: "Settlement",
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Select.name]: Select,
    [Option.name]: Option,
    [Input.name]: Input,
    [Cascader.name]: Cascader,
  },
  data() {
    return {
      addForm: {},
      cityJson,
      props: {
        value: "code",
        label: "name",
      },
      questionList: [],
      addFormRules: {
        city: [{ required: true, message: '请选择您所在的城市', trigger: 'change' }],
        troubleId: [{ required: true, message: '请选择您的口腔问题', trigger: 'change' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'nlur' }, { validator: PHONE_VALIDATOR, trigger: 'blur' }],
      },
      loading:false
    };
  },
  created() {
    this.getQuestion();
  },
  methods: {
    // 获取牙齿问题列表
    async getQuestion() {
      let res = await this.$axios.get(GET_ORALCAVITY_TROUBLE_OPTIONS);
      this.questionList = res.data || [];
    },

    // 保存信息
    saveApplyInfo() {
      let _this = this
      _this.$refs.addForm.validate(valid => {
        if (!valid) {
          return false;
        }
        _this.sendInfo()
      })
    },

    // 发送请求
    async sendInfo() {
      let _this = this
      let nodes = _this.$refs.carousel.getCheckedNodes(true)[0]
      let o = deepClone(_this.addForm)
      let params = { ...o }
      params.city = nodes.data.code
      params.cityName = nodes.data.name;
      params.platform = PLATFORM_TYPE;
      _this.loading = true
      let res = await _this.$axios.post(GET_QUOTATION_QUERY, params);
      _this.loading = false
      if (res.code == 200) {
        showToast({
          message: "提交成功",
          type: 'success'
        });
        _this.addForm = {}
        setTimeout(function () {
          _this.$refs.addForm.clearValidate()
        }, 30)
      }
    }

  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
<style>
.el_cascader .el-cascader-menu__wrap {
  height: 204px !important;
}
</style>